


<template>
    <div class="startup">
        <ul class="a-list">
            <li v-for="(item, index) in list" :key="index" :class="activeIndex == index ? 'active' : ''"
                @click="activeIndex = index, router.push(item.url)">{{ item.name }}</li>
        </ul>
       <div class="right"> <router-view></router-view></div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
let router = useRouter()
let list = [
    { name: 'Vue3版本', url: '/a' },
    { name: '启动项目', url: '/b' },
    { name: '启动报错', url: '/c' },
    { name: '快速上手', url: '/d' },
    { name: '端口变更', url: '/e' },
    { name: '项目发布', url: '/f' },
    { name: '前后台发布在一起', url: '/g' },
    { name: '功能介绍', url: '/h' }
]
let activeIndex = 0
</script>
<style scoped lang='scss'>
.startup {
    padding: 20px 30px;
    box-sizing: border-box;
    display: flex;

    .a-list {
        position: fixed;
        left: 0;
        top: 60px;
        display: flex;
        flex-direction: column;
        align-items: left;

        //    border-right: 1px solid #eee;
        li {
            padding: 10px;
            color: #aaa;
            border-right: 1px solid #eee;
        }
        .active {
            color: aqua;
        }

    }
    .right{
            margin-left: 120px;
        }
}
</style>